<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title>消防门分布</title>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/map.css"/>
    <script src="../../leaflet/leaflet.js"></script>
    <script src="../../leaflet/leaflet.marker.highlight.js"></script>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.marker.highlight.css"/>
</head>
<body>
<div id="map"></div>
<script src="../../js/common.js"></script>
<script src="../../js/mapSource.js"></script>
<script>

    var layer1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        maxZoom: 33,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZzczcDB6aHgycW1scXZqd3FpNmcifQ.d4p32JmAhTek8BUIt3WGLw'
    });
    map.addLayer(layer1);
    L.tileLayer.wms(mapSource.FireDoorList.url, {
        layers: mapSource.FireDoorList.layer,
        crs: L.CRS.EPSG4326,
        format: 'image/png',
        transparent: true,
        maxZoom: 33,
        minZoom: 13
    }).addTo(map);

    map.fitBounds([[34.823905944824, 113.557327270508],
        [34.8256912231445, 113.558494567871]]);
</script>
</body>
</html>